<template>
	<view class="container status-bar-height"
		:style="`background: url(${config.imgPath}/my/my-bg.png) #F6F6F6 no-repeat;background-size: contain;`">
		<view class="container-top flex-between flex-align-items">
			<view class="user-info flex flex-align-items">
				<image :src="userInfo.avatar" class="avatar"></image>
				<view>
					<view class="nick-name font-36-B">{{userInfo.nickname}}</view>
					<view v-if="userInfo.identity > 0" class="identity flex">
						<image v-if="userInfo.vip.individual > 0" :src="`${config.imgPath}/my/personal.png`"
							@click="toPath('/pagesA/my/member?type=1')"></image>
						<image v-if="userInfo.vip.corporate > 0" :src="`${config.imgPath}/my/enterprise.png`"
							@click="toPath('/pagesA/my/member?type=2')"></image>
						<image v-if="userInfo.vip.individual == 0 || userInfo.vip.corporate == 0 "
							:src="`${config.imgPath}/my/nomember.png`"
							@click="toPath('/pagesA/lawyer/openingPrivateLawyer')">
						</image>
					</view>
					<view class="mobile font-24-M">手机号码：{{userInfo.mobile}}</view>
				</view>
			</view>
			<view class="container-top-right flex">
				<image v-if="userInfo.is_lawyer" :src="`${config.imgPath}/my/identity-change.png`"
					@click="toPath('/pagesA/my/identityChange?type=1')"></image>
				<image :src="`${config.imgPath}/my/set.png`" @click="toPath('/pagesA/my/set')"></image>
			</view>
		</view>

		<view class="container-main">
			<view class="privilege flex-between flex-align-items">
				<template v-for="(item,index) in userInfo.privilege">
					<view v-if="index > 0" class="line"></view>
					<view class="privilege-item flex flex-column flex-align-items">
						<view class="privilege-value font-24-B">
							<text class="font-32-B color-main1">{{item.value}}</text>{{item.unit}}
						</view>
						<view class="privilege-label font-24-M">{{item.label}}</view>
					</view>
				</template>
			</view>

			<view class="wallet flex-between flex-align-items"
				:style="`background: url(${config.imgPath}/my/moneybg.png) no-repeat;background-size: cover;`">
				<view>
					<view class="wallet-label font-24-M">我的钱包</view>
					<view class="wallet-value font-48-B">{{userInfo.money}}</view>
				</view>
				<view class="wallet-btns flex">
					<view class="font-24-M color-main1" @click="toPath('/pagesA/my/wallet')">查看明细</view>
					<view class="font-24-M color-main1" @click="toPath('/pagesA/my/withdrawal')">去提现</view>
				</view>
			</view>

			<view class="order">
				<view class="order-top flex-between flex-align-items">
					<view class="order-title font-30-B">服务订单</view>
					<view class="more flex flex-align-items font-24-M"
						@click="toPath('/pagesA/order/serviceOrderList')">
						查看更多
						<uni-icons type="right" size="16" color="#C8C8C8"></uni-icons>
					</view>
				</view>
				<view class="order-list flex-around">
					<view v-for="(item,index) in serviceOrderStatus" :key="index"
						class="order-item flex flex-column flex-align-items" @click="toPath(item.path)">
						<image :src="item.img"></image>
						<view class="font-26-M">{{item.label}}</view>
					</view>
				</view>
			</view>

			<view class="order">
				<view class="order-top flex-between flex-align-items">
					<view class="order-title font-30-B">支付订单</view>
					<view class="more flex flex-align-items font-24-M" @click="toPath('/pagesA/order/payOrderList')">
						查看更多
						<uni-icons type="right" size="16" color="#C8C8C8"></uni-icons>
					</view>
				</view>
				<view class="order-list flex-around">
					<view v-for="(item,index) in payOrderStatus" :key="index"
						class="order-item flex flex-column flex-align-items" @click="toPath(item.path)">
						<image :src="item.img"></image>
						<view class="font-26-M">{{item.label}}</view>
					</view>
				</view>
			</view>

			<view class="my-menu">
				<view class="my-menu-title font-30-B">常用工具</view>
				<view class="my-menu-list">
					<view v-for="(item,index) in myMenuList" :key="index"
						class="my-menu-item flex-between flex-align-items" @click="toPath(item.path)">
						<view class="my-menu-left font-26-M flex flex-align-items">
							<image :src="item.img"></image>{{item.label}}
						</view>
						<uni-icons type="right" size="20" color="#C8C8C8"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<image :src="`${config.imgPath}/my/customer-service.png`" class="service" @click="callService"></image>

		<poster v-if="posterShow" :poster="posterUrl" @close="posterShowChange"></poster>

		<view v-if="contractObj.isShow" class="x-modal x-flex-column-center" @tap.stop="closeModel">
			<view class="middleContent x-flex-column-between">
				<view class="title x-flex-row-center">{{contractObj.title}}</view>s
				<view class="foot x-flex-row-between-center">
					<button class="cancel" @tap="cancel">{{contractObj.cancelText}}</button>
					<button class="confirm" @tap.stop="confirm" open-type="share">{{contractObj.confirmText}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		serviceOrderStatus,
		payOrderStatus,
		myMenuList
	} from '@/const/index.js';
	import poster from '@/components/poster/index.vue';
	import api from '@/api/index.js';
	import config from '@/js/config.js';


	const contractObj = ref({
		title: '分享',
		content: '',
		isShow: false,
		isShowBotton: true,
		cancelText: '保存图片',
		confirmText: '分享到微信'
	});
	const userInfo = ref({
		vip: {},
		privilege: []
	});
	const posterShow = ref(false);
	const posterUrl = ref('');

	// 用户端及律师端个人基本信息
	const getUserInfo = () => {
		api.my.getUserInfo().then(res => {
			console.log(res)
			uni.setStorageSync('userinfo', res);
			userInfo.value = {
				...res,
				privilege: [{
						label: '电话咨询',
						value: res.service.telephone_remain,
						unit: res.service.telephone_remain === '不限时' ? '' : '分钟'
					},
					{
						label: '合同审核',
						value: res.service.review_remain,
						unit: '份'
					},
					{
						label: '合同定制',
						value: res.service.customization_remain,
						unit: '份'
					},
					{
						label: '律师函',
						value: res.service.letter_remain,
						unit: '份'
					},
					{
						label: '代写诉讼',
						value: res.service.lawsuit_remain,
						unit: '份'
					}
				]
			};
		});
	}
	// 分享海报地址接口
	const getInviteImage = () => {
		api.my.getInviteImage().then(res => {
			posterUrl.value = res.invite_image;
		});
	}
	// 跳转内页
	const toPath = url => {
		if (url) {
			uni.navigateTo({
				url
			});
		} else {
			// #ifdef APP-PLUS
			contractObj.value.isShow = true
			// #endif
			// #ifdef MP-WEIXIN
			// contractObj.value.isShow = true
			posterShowChange();
			// #endif
		}
	}

	const closeModel = () => {
		contractObj.value.isShow = false
	}

	const confirm = () => {
		// #ifdef APP-PLUS
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 2,
			imageUrl: posterUrl.value,
			success: function(res) {
				console.log("success:" + JSON.stringify(res));
			},
			fail: function(err) {
				console.log("fail:" + JSON.stringify(err));
			}
		});
		// #endif
		// #ifdef MP-WEIXIN
		// 要分享的数据
		return {
			title: '法护人海报',
			// path: url,
			imageUrl: posterUrl.value,
		}
		// #endif
	}



	// #ifdef MP-WEIXIN
	// 分享好友
	onShareAppMessage(() => {
		// 要分享的数据
		return {
			title: '法护人海报',
			// path: url,
			imageUrl: posterUrl.value,
		}
	});

	// 分享朋友圈
	onShareTimeline(() => {
		return {
			title: '法护人海报',
			// path: url,
			imageUrl: posterUrl.value,
		}
	});
	// #endif

	const cancel = () => {
		posterShowChange();
		contractObj.value.isShow = false
	}


	// 显示或隐藏海报
	const posterShowChange = () => {
		posterShow.value = !posterShow.value;
	}
	// 拨打客服电话
	const callService = () => {
		api.base.getVirtualMobile({
			type: 4
		}).then(res => {
			uni.makePhoneCall({
				phoneNumber: res.relationNum + ''
			});
		});
	}

	onLoad(() => {});
	onShow(() => {
		getInviteImage();
		posterShow.value = false;
		getUserInfo();
	});
	onPullDownRefresh(() => {
		getUserInfo();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	});
</script>

<style lang="less" scoped>
	.container-top {
		padding: 32rpx 32rpx 16rpx;

		.user-info {
			min-height: 160rpx;

			.avatar {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				margin-right: 32rpx;
			}

			.nick-name {
				color: #333;
				margin-bottom: 8rpx;
			}

			.identity {
				margin-bottom: 8rpx;

				image {
					width: 138rpx;
					height: 48rpx;
				}
			}

			.mobile {
				color: rgba(51, 51, 51, 0.5);
			}
		}

		.container-top-right {
			position: relative;
			top: 20rpx;

			image {
				width: 56rpx;
				height: 56rpx;
				margin-left: 16rpx;
			}
		}
	}

	.container-main {
		padding: 18rpx 24rpx 24rpx;
	}

	.wallet {
		height: 174rpx;
		margin-bottom: 24rpx;
		padding: 0 32rpx;

		.wallet-label,
		.wallet-value {
			color: #fff;
		}

		.wallet-btns {
			view {
				height: 50rpx;
				padding: 0 24rpx;
				border-radius: 25rpx;
				background: #fff;
				line-height: 50rpx;

				&:first-child {
					margin-right: 24rpx;
				}
			}
		}
	}

	.privilege {
		margin-bottom: 24rpx;

		.line {
			width: 2rpx;
			height: 48rpx;
			background: rgba(51, 51, 51, 0.06);
		}

		.privilege-item {
			width: 140rpx;

			.privilege-value {
				color: #333;
				margin-bottom: 10rpx;
			}

			.privilege-label {
				color: #999;
			}
		}
	}

	.order {
		padding: 24rpx 24rpx 32rpx;
		border-radius: 24rpx;
		background: linear-gradient(to bottom, #dfe9ff 0, #fff 100%);
		margin-bottom: 24rpx;

		.order-top {
			margin-bottom: 32rpx;

			.order-title {
				color: #333;
			}

			.more {
				color: #636363;
			}
		}

		.order-list {
			.order-item {
				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 8rpx;
				}

				view {
					color: #333;
				}
			}
		}
	}

	.my-menu {
		padding: 28rpx 28rpx 12rpx;
		background: #fff;
		border-radius: 24rpx;

		.my-menu-title {
			color: #333;
			margin-bottom: 16rpx;
		}

		.my-menu-list {
			.my-menu-item {
				padding: 16rpx 0;

				.my-menu-left {
					color: #333;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.service {
		position: fixed;
		right: 32rpx;
		bottom: 96rpx;
		z-index: 100;
		width: 96rpx;
		height: 96rpx;
	}

	.x-modal {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 9999;

		.middleContent {
			width: 90vw;
			width: 660rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 0 32rpx;
			padding-bottom: 32rpx;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 38rpx;
				padding: 48rpx;
				padding-bottom: 36rpx;
				word-spacing: 1rpx;
			}

			.cont {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				text-align: center;
				width: 100%;
				// min-height: 16vh;
				max-height: 50vh;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #636363;
				line-height: 46rpx;
				word-wrap: break-word;
				word-spacing: 1px;
			}

			.foot {
				padding-top: 48rpx;

				.cancel,
				.confirm {
					font-size: 30rpx !important;
					width: 271rpx;
					height: 72rpx;
					// box-shadow: 4rpx 4rpx 12rpx 2rpx rgba(171, 181, 197, 0.06);
					// border-radius: 36rpx;
					// text-align: center;
					// line-height: 72rpx;
					// font-weight: 500;
					// box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
				}

				.cancel {
					background: #f6f6f6;
				}

				.confirm {
					background: #486aef;
					color: #ffffff;
				}
			}
		}
	}
</style>